<template>
  <div class="">
    <div class="search">
        <div class="input">
            <p><label>分类名称：</label><el-input placeholder="请输入内容" v-model='pageData.name'></el-input></p>
            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
       <el-button type="primary" @click="set">分配品牌</el-button>
       <el-button type="primary" @click="confirmset">编辑分配品牌</el-button>
       <el-button type="danger" @click="del">批量删除</el-button>

    </div>
    <tableVue :list="list" :state="true" v-loading="pageData.loading" :total="total" @changeData="selectionVal" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- <el-button
                  size="mini"
                  @click="details(scope.row,1)">分类品牌
                </el-button> -->
                <el-button
                  size="mini"
                  @click="details(scope.row,1)">二级分类
                </el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,1)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="handleEdit(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="分类" :dialog="dialog" @close="changeData" :state="false">
        <slot>
               <el-form :model="pageData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <!-- <el-form-item label="父级分类">
                   <el-select v-model="pageData.classifyId" placeholder="请选择">
                       <el-option value="">请选择</el-option>
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.categoryName"
                         :value="item.categoryId">
                       </el-option>
                     </el-select>
                  </el-form-item> -->
                   <el-form-item label="分类名称">
                       <el-input v-model="pageData.categoryName" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="分类排序">
                        <el-input v-model="pageData.ordinal" placeholder="请输入内容"></el-input>
                     </el-form-item>
                     <el-form-item label="是否APP显示">
                       <el-select v-model="pageData.isAppIndex" placeholder="请选择">
                           <el-option value="">请选择</el-option>
                           <el-option
                             v-for="item in isApp"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                           </el-option>
                         </el-select>
                      </el-form-item>
                       <el-form-item label="分类图片" prop="imgUrl">
                             <el-upload
                              class="upload-demo"
                              :auto-upload='false'
                              :on-change="upload"
                              :file-list="pageData.fielList"
                              :limit="1"
                              :on-exceed	= "exceed"
                              action="https://jsonplaceholder.typicode.com/posts/"
                              :list-type="String"
                              list-type="picture">
                              <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                       </el-form-item>
                       <el-form-item class="confirm">
                          <el-button type="primary" v-if="btnState == '1'" @click="submitForm(null,'post')">提交</el-button>
                          <el-button type="primary" v-if="btnState == '2'" @click="upForm('')">更新</el-button>
                       </el-form-item>
               </el-form>
        </slot>
    </dialogVue>
    <dialogVue title="设置分类品牌" :dialog="setClass" @close="changeData" :state="false">
        <slot>
          <el-transfer
           v-model="pageData.setBrandId"
           :titles="['所有品牌','已选品牌']"
           :filterable="true"
           :props="{key: 'value',label: 'desc'}"
           :data="brandType">
          </el-transfer>
          <div class="confirms">
            <el-button type="primary" @click="setconfirm(null,'post')">提交</el-button>
          </div>
        </slot>
    </dialogVue>
  </div>
</template>

<script>
  import Data from './productClassifyData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import { Base64 } from 'js-base64';
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import {
    productClassList,
    allProudctClass,
    addProudctClass,
    delProudctClass,
    setProudctBrand,
    getClassBrand,
    brandList
  } from "@/api/product/product";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      var data = {};
      this.getProductClassList(data);
      // this.getAllProudctClass();
    },
    methods : {
      handSize (val) {
        var data = {
          current : val,
          categoryName :this.pageData.name
        }
        this.getProductClassList(data,val)
      },
      search () {
        var data = {
          categoryName :this.pageData.name
        }
        this.getProductClassList(data,'')
      },
      getProductClassList (data,val) {//分类列表
        data['current'] = val == '' ? '1' : val
        data['size'] = '10'

        productClassList(data).then(res=>{
            this.pageData.loading = true;
          if (res.data.code == 'OK') {
            this.total = res.data.data.total;
            this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               return item;
            });
            this.pageData.loading = false;
             this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      confirmset () {
          this.set();
          let id = ''
          this.pageData.rowid.map(item=>{
             id = item.categoryId
          })
          getClassBrand(id).then(res=>{
            if (res.data.code == 'OK') {
               res.data.data.map(item=>{
                 this.pageData.setBrandId.push(item.brandId)
               })
            } else {
              this.$message.error(res.data.message);
            }
          })
      },
      getAllProudctClass () {
        this.brandType = [];
        var data = {
          current : '1',
          size : '10000'
        }
        brandList(data).then(res=>{
          if (res.data.code == 'OK') {
            res.data.data.records.map(item=>{
              this.brandType.push({
                value : item.brandId,
                desc : item.brandDisplayName
              })
            })
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      add () {//新增分类
        if (checkPermission('add_product_class') == true) {
           this.btnState ='1'
            this.dialog = true;
            this.pageData = {};

        } else {
            this.$message.error('您没有权限操作');
        }
      },
      del () {
        if (checkPermission('del_product_class') == true) {
            if (this.pageData.rowid.length > 0) {
                let id = ''
                this.pageData.rowid.map(item=>{
                   id += item.categoryId + ','
                })
                id = (id.substring(id.length-1)==',')?id.substring(0,id.length-1):id;
                this.delMessage(()=>{
                  delProudctClass(id).then(res=>{
                    if (res.data.code == 'OK') {
                        this.$message.success('删除成功');
                        var data = {}
                        this.getProductClassList(data);
                    } else {
                      this.$message.error(res.data.message);
                    }
                  })
                })
            } else {
              this.$message.error('请选择要删掉的分类');
            }
        } else {
          this.$message.error('您没有权限操作');
        }
      },
      setconfirm () {
        let id = ''
        this.pageData.rowid.map(item=>{
           id += item.categoryId + ','
        })
        id = (id.substring(id.length-1)==',')?id.substring(0,id.length-1):id;
        var data = {
          brandId : this.pageData.setBrandId,
          categoryId : id
        }
        setProudctBrand(data).then(res=>{
          if (res.data.code == 'OK') {
              this.$message.success('设置品牌成功');
              this.setClass = false
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      handleEdit (item,num) {
          this.pageData.fielList = [];
        if (num == 1) {
          if (checkPermission('compile_product_class') == true) {
                  this.btnState = '2'
                  var temp = {
                    name : '',
                    url : item.categoryImg
                  }
                  this.dialog = true;
                  this.pageData.categoryName = item.categoryName
                  this.pageData.ordinal = item.ordinal
                  this.pageData.classifyId = item.parentCategoryId == 0 ? '' : item.parentCategoryId;
                  this.pageData.pageImgUrl = item.categoryImg
                  this.pageData.fielList.push(temp);
                  this.pageData.categoryId = item.categoryId;
                  this.pageData.isAppIndex = item.isAppIndex
          } else {
              this.$message.error('您没有权限操作');
          }
        } else {
          this.del()
        }
      },
      upForm () {
        this.submitForm(this.pageData['categoryId'],'put')
      },
      selectionVal (data) {//拿到list的val
          this.pageData.rowid = data;
      },
      changeData (val) {
        this.dialog = val;
        this.setClass = val;
      },
      exceed () {
        this.$message.error("只能传一张图片");
      },

      set () {
          this.pageData.setBrandId = [];
          if (checkPermission('del_product_class') == true) {
              if (this.pageData.rowid.length > 0 && this.pageData.rowid.length < 2) {
                  this.getAllProudctClass()
                  this.setClass = true;
              } else {
                  this.$message.error("请选择要设置的分类");
              }
          } else {
            this.$message.error("您没有权限操作");
          }
      },
      upload (file,fileList) {//拿到图片的地址
           let reader = new FileReader();
           reader.readAsDataURL(file.raw);
           reader.onload =  () => {
             this.pageData.pageImgUrl = reader.result.split(',')[1];
           }
      },
      submitForm (categoryId,method) {
          let data = {
            categoryName : this.pageData.categoryName,
            ordinal : this.pageData.ordinal,
            categoryImg : this.pageData.pageImgUrl,
            parentCategoryId : this.pageData.classifyId == undefined ? null : this.pageData.classifyId,
            categoryId : categoryId,
            isAppIndex : this.pageData.isAppIndex
          }
          addProudctClass(data,method).then(res=>{
            if (res.data.code == 'OK') {
                this.dialog = false;
                if (method == 'post') {
                    this.$message.success('新增成功');
                } else {
                    this.$message.success('编辑成功');
                }
                var data = {}
                this.getProductClassList(data);
            } else {
              this.$message.error(res.data.message);
            }
          })
      },
      details (item) {//详情
        this.$router.push({
          name : 'twoClass',
          query : {
            id:JSON.stringify(item.categoryId),
          }
        })
      }
    }
  }
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.confirms {
  position: absolute;
    bottom: 20px;
    right: 100px;
}
</style>
